<script setup>
import { ref, onMounted } from 'vue'
import { usePopStore } from '@/stores'
import { airspaceListServer, airspaceMapServer } from '@/api'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
const list = ref()
const getAirspaceList = async () => {
  const res = await airspaceListServer()
  list.value = res.data
}

const popStore = usePopStore()
const lookDetail = async (item, index) => {
  return
  const res = await airspaceMapServer()
  const data = res.data.filter((i) => i.airspaceName.includes(item.airspaceName))[0]
  popStore.Airspace.showPop = true
  popStore.Airspace.popInfo = data
  popStore.XY = [0, 0]
  __g.marker3d.focus('airspace-' + index, 1200)
}

onMounted(() => {
  getAirspaceList()
})
</script>
<template>
  <div class="card">
    <CommonTitle title="空域列表" />
    <div class="table">
      <ul class="thead">
        <li>空域序号</li>
        <li>空域名称</li>
        <li>空域面积</li>
        <!-- <li>空域类型</li> -->
        <li>操作</li>
      </ul>
      <ul class="tbody">
        <vue3-seamless-scroll
          :list="list"
          :step="0.3"
          :hover="true"
          :isRemUnit="true"
          :wheel="true"
          :delay="3"
          :limitScrollNum="5"
        >
          <li v-for="(item, index) in list" :key="index">
            <p>
              <span class="top-item" v-if="index < 2">{{ index + 1 }}</span>
              <span class="bottom-item" v-else>{{ index + 1 }}</span>
            </p>
            <p>
              {{ item.airspaceName }}
            </p>
            <p>
              {{ item.airspaceArea }}
            </p>
            <!-- <p>
              <span class="type">{{ item.airspaceType }}</span>
            </p> -->
            <p class="view" @click="lookDetail(item, index)">
              <img src="@img/management/seach-icon.png" alt="" />
              <text>查看</text>
            </p>
          </li>
        </vue3-seamless-scroll>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  margin-top: 15px;

  .table {
    width: 100%;
    padding: 10px;

    .thead {
      width: 100%;
      height: 37px;
      display: flex;
      background: url('@img/infrastructure/table_header_bg.png');
      background-size: 100% 100%;

      li {
        flex: 1;
        line-height: 37px;
        text-align: center;
      }
    }

    .tbody {
      height: 175px;
      overflow: hidden;

      li {
        display: flex;
        height: 37px;
        line-height: 37px;
        border-bottom: 1px solid #0f496c;

        &:nth-child(odd) {
          background-color: rgba(15, 73, 108, 0.3);
        }

        P {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          &:nth-child(2) {
            flex: 0 0 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .type {
            width: 67px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: rgba(0, 213, 255, 0.25);
            border-radius: 2px;
            border: 1px solid #00d5ff;
          }
        }
      }
    }

    .top-item {
      width: 20px;
      height: 20px;
      background: url('@img/management/top-item-bg.png');
      background-size: 100% 100%;
      text-align: center;
      color: #fff;
      font-family:
        PingFangSC,
        PingFang SC;
      font-size: 12px;
      line-height: 20px;
    }

    .bottom-item {
      width: 20px;
      height: 20px;
      background: url('@img/management/bottom-item-bg.png');
      background-size: 100% 100%;
      text-align: center;
      color: #fff;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
    }

    .view {
      display: flex;
      justify-content: start;
      align-items: center;
      color: #00d5ff;
      cursor: pointer;

      img {
        display: block;
        height: 15px;
      }
    }
  }
}

.transparent-table {
  font-size: 12px;
}
</style>
